<h3>Challenges</h3>
<div class='tag-selector' ng-show='!!allTags'>
  <div class="info-box">
    <span class='info-text'>left or right click to filter tags</span>
  </div>
  <div class='tag-align'>
    <div class='tag-filter' ng-repeat='tag in allTags | orderBy:"name"'
      ng-class='{"tag-inc": shownTags[tag.tagslug]==2, "tag-exc": shownTags[tag.tagslug]==0, "tag-either": shownTags[tag.tagslug]==1}'
      ng-any-click='toggleTag(tag.tagslug, $click)'>
        <span class='tag-item'>
          <i class='material-icons'>{{getSentiment(tag)}}</i>
          {{tag.name}}
        </span>
    </div>
  </div>
</div>

<div class='row jeopardy-container jeopardy-tags-container'>
  <div class='jeopardy-chall jeopardy-box' ng-repeat='chall in challenges'
    ng-click='goChallenge(chall)'
    ng-class='{solved: chall.answered, unsolved: !chall.answered}'
    ng-show='tagsAllowed(chall)'
    ><div class='flipper'>
      <div class='card front'>
        <div class='solved-banner ng-hide'
          ng-show='chall.answered'>Solved</div>
        <div class='chall-num'>
          <span class='chall-num-val' ng-bind='chall.solves'>
        </div>
        <div ng-bind='chall.name' class='chall-name'></div>
        <div class='chall-tags'>
          <span class='chall-dummy'></span>
          <span class='chall-tag' ng-repeat='tag in chall.tags | orderBy:"name"' ng-bind='tag.name'></span>
        </div>
      </div>
      <div class='card back'><p ng-bind='flipSide(chall)'></p></div>
    </div>
  </div>
</div>

<div class='challenge-modal modal fade' id='challenge-modal'>
  <div class='modal-dialog'>
    <div class='chall-panel-body modal-content'>
      <div challenge-box challenge='currChall' />
    </div>
  </div>
</div>
